import React, {Component} from 'react';
import cssModule from './ChatInterface.module.less'
import testimg from '../../assets/img/001.jpg'

import {NavBar, Icon} from 'antd-mobile';

class ChatInterface extends Component {
    render() {
        return (
            <div>
                <div className='sticky wid1p' style={{top: 0}}>
                    {/*导航栏*/}
                    <NavBar
                        mode="light"
                        icon={<Icon type="left"/>}
                        onLeftClick={() => this.props.history.goBack()}
                        rightContent={[
                            <Icon key="1" type="ellipsis"/>,
                        ]}
                    >
                        <div className={cssModule.navTitle}>
                            <p className={cssModule.navTitleBig}>陈女士</p>
                            <p className={cssModule.navTitleSmall}>以成互动：招聘者</p>
                        </div>
                    </NavBar>

                    {/*操作栏*/}
                    <div className={`${cssModule.opteraBar} flex just-spa-aro ali-cen bg-White paddtb10 fo-gray`}>
                        <section className='flex flex-col ali-cen'>
                            <i className={`${cssModule.opteraBarIconfont} iconfont fo-orange`}>&#xe601;</i>
                            <span>打电话</span>
                        </section>
                        <section className='flex flex-col ali-cen'>
                            <i className={`${cssModule.opteraBarIconfont} iconfont fo-green`}>&#xe888;</i>
                            <span>换微信</span>
                        </section>
                        <section className='flex flex-col ali-cen'>
                            <i className={`${cssModule.opteraBarIconfont} iconfont fo-skyblue`}>&#xe61e;</i>
                            <span>发简历</span>
                        </section>
                        <section className='flex flex-col ali-cen'>
                            <i className={`${cssModule.opteraBarIconfont} iconfont fo-red`}>&#xe602;</i>
                            <span>不感兴趣</span>
                        </section>
                    </div>
                </div>

                {/*职位介绍*/}
                <div className='postIntroduceCard radius10 bg-White marginlr10 mt20 padd20'>
                    <div className='flex ali-cen just-spa-bet'>
                        <span className='font-wei600 fo-16'>前端0473</span>
                        <span className='fo-green'>8-9K</span>
                    </div>
                    <div className='flex ali-cen mt14'>
                        <span className='mr10'>以成互动</span>
                        <span>未融资</span>
                    </div>
                    <div className='flex ali-cen mt14'>
                        <span className='mr6 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>杭州市-西湖区- 阿萨大</span>
                        <span className='mr6 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>1-3年</span>
                        <span className='mr6 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>本科</span>
                    </div>
                    <div className='flex flex-col mt14'>
                        <p>岗位职责：</p>
                        <section className='mt6 line-hei-26 over-two-line'>
                            1.按时缴费卡是解放咔叽是否考虑降低身份氨基酸的卡刷积分ask附件的开发速度加快附件是快乐的分手的借口附件
                            2.爱上反抗类毒素解放上点击发送是对方的实力
                        </section>
                    </div>
                    <div className='flex ali-cen flex-wrap mt14'>
                        <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>HTML</span>
                        <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>CSS</span>
                        <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>JS</span>
                        <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>VUE</span>
                        <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>React</span>
                        <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>radius</span>
                        <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>golang</span>
                        <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>python</span>
                        <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>mysql</span>
                    </div>

                    <div className='flex ali-cen mt14'>
                        <img className='yicon-30 radius50p mr8' src={testimg}/>
                        <div>陈女士 · 招聘者</div>
                    </div>
                    <div className='line-WhiteSmoke mt14'></div>
                    <div className='flex fo-gray mt14'>
                        <span className='mr6'>2月4号</span>
                        <span>14:50 向您发起的沟通</span>
                    </div>
                </div>

                {/*聊天条-左边*/}
                <div className={`flex ali-sta marginlr10 mt20 ${cssModule.chatForLeft}`}>
                    <img className='yicon-40 radius50p' src={testimg}/>
                    <div className='flex flex-col'>
                        <div className={cssModule.chatBubble}>您好！可以继续了i奥爱神的箭阿三快乐到家啊是快乐的较快拉升阶段</div>
                        <span className='mt6 fo-10 fo-gray'>已读</span>
                    </div>
                </div>
                {/*聊天条-时间*/}
                <div className='fo-gray txt-cen mt14'>15:05</div>
                {/*聊天条-右边*/}
                <div className={`flex ali-sta marginlr10 mt20  ${cssModule.chatForRight}`}>
                    <img className='yicon-40 radius50p' src={testimg}/>
                    <div className={`flex flex-col ${cssModule.chatForRightFloat}`}>
                        <div className={cssModule.chatBubble}>您好！可以继续了i奥爱神的箭阿三快乐到家啊是快乐的较快拉升阶段</div>
                        <span className='mt6 fo-10 fo-gray'>已读</span>
                    </div>
                </div>
                {/*聊天条-右边*/}
                <div className={`flex ali-sta marginlr10 mt20  ${cssModule.chatForRight}`}>
                    <img className='yicon-40 radius50p' src={testimg}/>
                    <div className={`flex flex-col ${cssModule.chatForRightFloat}`}>
                        <div className={cssModule.chatBubble}>您好！可以继续了i奥爱神的箭阿三快乐到家啊是快乐的较快拉升阶段</div>
                        <span className='mt6 fo-10 fo-gray'>已读</span>
                    </div>
                </div>
                {/*聊天条-右边*/}
                <div className={`flex ali-sta marginlr10 mt20  ${cssModule.chatForRight}`}>
                    <img className='yicon-40 radius50p' src={testimg}/>
                    <div className={`flex flex-col ${cssModule.chatForRightFloat}`}>
                        <div className={cssModule.chatBubble}>您好！可以继续了i奥爱神的箭阿三快乐到家啊是快乐的较快拉升阶段</div>
                        <span className='mt6 fo-10 fo-gray'>未读</span>
                    </div>
                </div>

                {/*顶部占位符*/}
                <div style={{height: '70px', width: ' 100%'}}/>
                {/*底部发送栏*/}
                <div className={`${cssModule.bottomOperate} fiex flex ali-cen bg-White paddtb10 wid1p`} style={{bottom: 0}}>
                    <i className={`iconfont ${cssModule.bottomOperateIconfont} marginlr10`}>&#xe618;</i>
                    <input className='input flex1 mr10' placeholder='说点啥...'/>
                    <i className={`iconfont ${cssModule.bottomOperateIconfont} marginlr10`}>&#xe785;</i>
                    <i className={`iconfont ${cssModule.bottomOperateIconfont} marginlr10`}>&#xe784;</i>
                </div>
            </div>
        );
    }
}

export default ChatInterface;